import React, { Component } from "react";
import { Card, Descriptions, Typography } from "antd";
import "antd/dist/antd.css";
import { AppleOutlined } from "@ant-design/icons";

const { Text } = Typography;

export class StepDetail2 extends Component {
  constructor(props) {
    super(props);
    this.info = props.info;
  }

  render() {
    return (
      <div style={{ marginTop: "16px" }}>
        <Card>
          <Descriptions
            title={`报价单${this.info.quotation_id}`}
            bordered
            column={2}
          >
            <Descriptions.Item label="公司">{`${this.info.company_name}(${this.info.company_id})`}</Descriptions.Item>
            <Descriptions.Item label="创建时间">
              {this.info.quotation_date}
            </Descriptions.Item>
            <Descriptions.Item
              label="操作员"
              span={2}
            >{`${this.info.quo_opname}(${this.info.quo_opid})`}</Descriptions.Item>
            <Descriptions.Item label="询价详情" span={3}>
              {this.info.invoicedtl.map((product) => (
                <div>
                  <AppleOutlined />
                  &nbsp;
                  {`${product.goods_name} (${product.quantity})`}
                </div>
              ))}
              <br />
              <Text
                mark
                italic={true}
                strong={true}
              >{`折扣：${this.info.discount}%，总计：￥${this.info.total_price}`}</Text>
            </Descriptions.Item>
          </Descriptions>
        </Card>
      </div>
    );
  }
}

export default StepDetail2;
